<style lang="less">
</style>

<template>
    <div style="padding-left:80px">
        <el-form
            :model="queryForm.condition"
            label-width="130px"
            :rules="rules"
            ref="addform"
            label-suffix="："
        >
            <el-row :getter="10" v-if="dataProp === '编辑'">
                <el-col :span="20">
                    <el-form-item :label="$t('overseasInstitutions.schoolNumber')" prop="collegeCode">
                        <el-input
                            :disabled="dataProp === '编辑'"
                            v-model="queryForm.condition.collegeCode"
                            maxlength="32"
                            :placeholder="$t('overseasInstitutions.pleaseEnterSchool')"
                        ></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :getter="10">
                <el-col :span="20">
                    <el-form-item :label="$t('overseasInstitutions.schoolName')" prop="collegeName">
                        <el-input
                            v-model="queryForm.condition.collegeName"
                            maxlength="32"
                            :placeholder="$t('请输入')"
                        ></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :getter="10">
                <el-col :span="20">
                    <el-form-item :label="$t('overseasInstitutions.schoolNameEn')" prop="collegeNameEn">
                        <el-input
                            v-model="queryForm.condition.collegeNameEn"
                            maxlength="128"
                            :placeholder="$t('请输入')"
                        ></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :getter="10">
                <el-col :span="20">
                    <el-form-item :label="$t('overseasInstitutions.countryRegion')" prop="nationId">
                        <el-select
                            filterable
                            v-model="queryForm.condition.nationId"
                            :placeholder="$t('common.pla.pleaseSelect')"
                            clearable
                            style="width: 100%;"
                        >
                            <el-option
                                v-for="item in options.regionList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :getter="10">
                <el-col :span="20">
                    <el-form-item :label="$t('overseasInstitutions.ourUniversity')" prop="cooperationFlag">
                        <el-select
                            v-model="queryForm.condition.cooperationFlag"
                            clearable
                            style="width: 100%"
                        >
                            <el-option label="是" :value="1"></el-option>
                            <el-option label="否" :value="0"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-dialog
            width="25%"
            ref="innerDialog"
            :title="$t('graduateBase.prompt')"
            :visible.sync="innerVisible"
            append-to-body
            :top="'28vh'"
        >
            <div style="text-align: left;margin-bottom: 25px;">{{$t('graduateBase.cancelTip')}}</div>
            <div style="text-align: right;">
                <el-button type="primary" @click="confirmInner">{{$t('common.btn.confirm')}}</el-button>
                <el-button @click="cancelInner">{{$t('common.btn.cancel')}}</el-button>
                <el-button
                    type="primary"
                    @click="confirmAndClose"
                >{{$t('graduateBase.saveAndClose')}}</el-button>
            </div>
        </el-dialog>
        <el-row type="flex" class="row-bg" justify="end">
            <el-button @click="cancelDialog">{{$t('overseasInstitutions.cancel')}}</el-button>
            <el-button type="primary" @click="conserve">{{$t('overseasInstitutions.save')}}</el-button>
        </el-row>
    </div>
</template>

<script>
import { queryDic } from 'common/src/api/dictionary'
import UTILS from 'common/src/utils/utils'
import graduateStudent from 'common/src/api/graduateStudent/graduateStudent'
import interAcaConference from 'common/src/api/internationalCommunication/interAcaConference'
import { getALLCollege } from 'common/src/api/internationalExchanges/exchangeCollegeManagement'

export default {
    props: {
        dataList: {
            type: String
        },
        dataProp: {
            type: String
        },
        dataListProp: {
            type: Object
        },
        dataQueryForm: {
            type: Object
        },
        showFlag: {
            type: Boolean
        },
        agent: {
            type: Boolean,
            default: false,
            required: false
        },
        admin: {
            type: Boolean,
            default: false,
            required: false
        }
    },
    data() {
        let cannotEnter = (rule, value, callback) => {
            let reg = /[`$]/im
            if (reg.test(value)) {
                return callback(new Error(this.$t('identificationToDoList.cannotContain')))
            } else if (value === '') {
                return callback(new Error(this.$t('internship.pleaseEnter')))
            }
            return callback()
        }
        let cannotEnterName = (rule, value, callback) => {
            let reg = /[`$]/im
            if (reg.test(value)) {
                return callback(new Error(this.$t('identificationToDoList.cannotContain')))
            } else return callback()
        }
        let validateNum = (rule, value, callback) => {
            let reg = /^[1][3,4,5,7,8][0-9]{9}$/
            if (!reg.test(value) || value === '') {
                return callback(new Error(this.$t('mainbase.pleasePhone')))
            }
            return callback()
        }
        return {
            dataList: [],
            fileList: [],
            queryForm: {
                condition: {
                    collegeCode: '',
                    collegeName: '',
                    collegeNameEn: '',
                    nationId: '',
                    cooperationFlag: ''
                }
            },
            innerVisible: false,
            id: '',
            restaurants: [],
            formsLearn: [],
            options: {
                facultys: [],
                timeList: [],
                title: [],
                nationId: [],
                regionList: []
            },
            listName: '',
            pickerOptionsStart: {
                disabledDate: time => {
                    let endDateVal = this.queryForm.effectEndDate
                    if (endDateVal) {
                        return time.getTime() > new Date(endDateVal).getTime()
                    }
                }
            },
            pickerOptionsEnd: {
                disabledDate: time => {
                    let beginDateVal = this.queryForm.effectStartDate
                    if (beginDateVal) {
                        return time.getTime() <= new Date(beginDateVal).getTime() - 86400000
                    }
                }
            },
            rules: {
                password: [{ validator: cannotEnterName, trigger: 'blur' }],
                collegeName: [
                    { required: true, message: this.$t('请输入学校名称'), trigger: 'blur' },
                    { validator: this.checkSpecial, trigger: 'blur' }
                ],
                collegeNameEn: [
                    { required: true, message: this.$t('请输入学校英文名称'), trigger: 'blur' },
                    { validator: this.checkSpecial, trigger: 'blur' }
                ],
                nationId: [{ required: true, message: this.$t('请选择国家地区'), trigger: 'blur' }],
                cooperationFlag: [
                    {
                        required: true,
                        message: this.$t('请选择是否为我校合作院校'),
                        trigger: 'blur'
                    }
                ]
            }
        }
    },
    watch: {
        dataListProp: {
            handler: function(newV, oldV) {
                if (this.dataProp == '编辑') {
                    this.queryForm.condition = this.dataListProp
                } else {
                    this.queryForm.condition.collegeCode = ''
                    this.queryForm.condition.collegeName = ''
                    this.queryForm.condition.collegeNameEn = ''
                    this.queryForm.condition.nationId = ''
                    this.queryForm.condition.cooperationFlag = ''
                }
            },
            deep: true,
            immediate: true
        }
    },
    mounted() {
        this.getOptions()
        this.getColleges()
    },
    methods: {
        async getColleges() {
            let { code, data } = await getALLCollege()
            if (code !== 200) return
            this.options.regionList = data.list.map(item => {
                return {
                    value: item.id,
                    label: item.nameCN
                }
            })
        },
        getSessionBase() {
            graduateStudent
                .getSession()
                .then(res => {
                    this.id = res.data.realUid
                })
                .then(() => {
                    this.getBaseListByBase(this.id)
                })
        },
        getBaseListByBase(id) {
            this.formsLearn = []
            graduateStudent.getBaseListByBaseAccount(id).then(res => {
                if (res.data.length > 0) {
                    res.data.forEach(el => {
                        this.formsLearn.push({
                            label: el.baseName,
                            value: el.baseName
                        })
                    })
                }
            })
        },
        handleSelectList() {},
        querySearchList(queryString, cb) {
            let restaurants = this.formsLearn
            let results = queryString
                ? restaurants.filter(this.createFilterList(queryString))
                : restaurants
            // 调用 callback 返回建议列表的数据
            cb(results)
        },
        createFilterList(queryString) {
            return restaurant => {
                return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
            }
        },
        // 过滤$符号
        checkSpecial(rule, value, callback) {
            let regEn = /[`$]/im
            if (regEn.test(value)) {
                return callback(new Error(this.$t('identificationToDoList.cannotContain')))
            } else if (value === '') {
                return callback()
            } else {
                return callback()
            }
        },
        // 过滤$符号
        changeSymbol(val) {
            if (this.queryForm.condition.linkAddress.indexOf('$') >= 0) {
                this.queryForm.condition.linkAddress = ''
                return this.$message({
                    type: 'error',
                    message: this.$t('identificationToDoList.cannotContain')
                })
            }
        },
        // 过滤$符号
        changeRntroduc(val) {
            if (this.queryForm.condition.introduction.indexOf('$') >= 0) {
                this.queryForm.condition.introduction = ''
                return this.$message({
                    type: 'error',
                    message: this.$t('identificationToDoList.cannotContain')
                })
            }
        },
        getOptions() {
            // 筛选条件字典查询
            let data = {
                lang: this.$store.getters.language || 'cn',
                type: 'allChild',
                keys: ['X_YX', 'G_XBIE', 'G_GJQU']
            }
            queryDic(data).then(res => {
                UTILS.fillSelect(
                    {
                        title: 'X_YX',
                        nationId: 'G_GJQU' // 国别/地区
                    },
                    res.data,
                    this.options
                )
            })
        },

        // 根据姓名工号模糊查询
        handleChange(val) {
            let obj = {
                pageNum_: 0,
                pageSize_: 100
            }
            // obj.condition = val.target.value;
            obj.condition = val
            this.handleFindTeacher(obj)
        },
        handleFindTeacher(data) {
            graduateStudent.findTeacherList(data).then(res => {
                this.restaurants = res.data.list
                this.restaurants.map(value => {
                    value['value'] = value.name + '(' + value.code + ')'
                })
            })
        },
        // 输入搜索
        querySearch(queryString, cb) {
            let restaurants = this.restaurants
            let results = queryString
                ? restaurants.filter(this.createFilter(queryString))
                : restaurants
            cb(results)
        },
        createFilter(queryString) {
            return restaurant => {
                return (
                    restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0 ||
                    restaurant.code.toLowerCase().indexOf(queryString.toLowerCase()) === 0
                )
            }
        },
        // 内层弹出确定
        confirmInner() {
            this.dataListProp = {}
            this.listName = ''
            this.$refs['addform'].resetFields()
            for (let key in this.queryForm.condition) {
                this.queryForm.condition[key] = ''
            }
            this.innerVisible = false
            this.$emit('cancel-dialog', false)
        },
        // 内层弹出取消
        cancelInner() {
            this.innerVisible = false
        },
        // 内层弹出保存关闭
        confirmAndClose() {
            this.innerVisible = false
            this.conserve()
        },
        // 取消
        cancelDialog() {
            this.$refs['addform'].resetFields()
            this.$emit('cancel-dialog', false)
        },

        // 保存
        conserve() {
            this.$refs['addform'].validate(valid => {
                if (valid) {
                    if (this.dataProp === '新增') {
                        this.$emit('affirm-form', this.queryForm.condition, this.dataQueryForm)
                    } else {
                        this.queryForm.condition.id = this.dataListProp.id
                        this.$emit('affirm-form', this.queryForm.condition, this.dataQueryForm)
                    }
                }
            })
        }
    }
}
</script>
